<template>
  <div class="li flex-al hover2" @click="toP(artistId)" style="width: 100%">
    <el-image class="img" :src="titleImg" fit="cover"></el-image>
    <div class="detail w100">
      <p class="name">{{ artistName }}</p>
      <!-- <p class="zhiwei text-ell" v-if="companyName.length<=6">{{ companyName }}丨{{ artistPosition }}</p> -->
      <p class="zhiwei text-ell">
        <span v-if="companyName && companyName.length <= 6">{{
          companyName
        }}</span>
        <span v-else>{{ companyName.substring(0, 6) + "..." }}</span>
        丨{{ artistPosition }}
      </p>
      <div class="line-row"></div>
      <div class="w100 flex-row j-sb">
        <p class="piao">{{ ticketNumber }}票</p>
        <el-button type="primary" plain @click.stop="handVote">投票</el-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    titleImg: {
      type: String,
    },
    artistName: {
      type: String,
    },
    companyName: {
      type: String,
    },
    artistPosition: {
      type: String,
    },
    ticketNumber: {
      type: Number,
    },
    artistId: {
      type: Number,
    },
  },
  methods: {
    async handVote() {
      // console.log(localStorage.getItem('userCode'))
      let res = await this.api.votePc({
        customizeId: 1,
        artistId: this.artistId,
      });
      this.$message({
        message: res.content,
        type: "success",
      });
    },
    toP(artistId) {
      console.log(this.artistId);
      this.toPeople(artistId);
    },
  },
};
</script>
<style lang="less" scoped>
.line-row {
  margin: 15px auto;
  // width: 283px;
  margin-left: -15px;
  background: #f2f2f2;
}
.li {
  // width: 267px;
  height: 324px;
  background: #ffffff;
  box-shadow: 0 0 18px 0 rgba(18, 27, 83, 0.07);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 20px;
  // margin-right: 20px;
  &:hover {
    box-shadow: none;
  }
  .img {
    width: 280px;
    min-height: 176px;
    min-height: 176px;
  }
  .detail {
    padding: 22px 15px;
    padding-top: 15px;
    padding-bottom: 15px;
    .name {
      font-size: 16px;
      color: #333333;
      margin-bottom: 5px;
      font-weight: bolder;
    }
    .zhiwei {
      font-size: 14px;
      color: #666666;
    }
    .piao {
      font-size: 14px;
      font-weight: bolder;
      color: #333333;
    }
  }
}
</style>
